<template>
  <div>
    <!-- 列表 -->
    <ul class="TemplateStyle">
      <!-- 捐赠日期 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/date.png" />
          <span class="li_txt">捐赠日期</span>
        </div>
        <div class="label">
          <input type="text" :value="userDate" :disabled="true" />
        </div>
      </li>
      <!-- 捐赠物资(名称) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/borrow.png" />
          <span class="li_txt">捐赠物资(名称)</span>
        </div>
        <div class="label">
          <input type="text" v-model="donateName" />
        </div>
      </li>
      <!-- 捐赠物资(单位) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/order.png" />
          <span class="li_txt">捐赠物资(单位)</span>
        </div>
        <div class="label">
          <input type="text" v-model="donateUnit" />
        </div>
      </li>
      <!-- 捐赠物资(数量) -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/money.png" />
          <span class="li_txt">捐赠物资(数量)</span>
        </div>
        <div class="label">
          <input type="number" v-model="donateId" />
        </div>
      </li>
      <!-- 生产日期 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/date.png" />
          <span class="li_txt">生产日期</span>
        </div>
        <div class="label">
          <van-cell
            style="height: 2rem;border-radius:.8rem;box-sizing:border-box;padding:.3rem 20%;"
            :value="date1"
            @click="show1 = true"
          />
          <van-calendar
            id="date1"
            :default-date="timeDefaultShow"
            :min-date="minDate"
            :max-date="maxDate"
            color="#71a16d"
            v-model="show1"
            @confirm="onConfirm1"
          />
        </div>
      </li>
      <!-- 有效期至 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/term.png" />
          <span class="li_txt">有效期至</span>
        </div>
        <div class="label">
          <van-cell
            style="height: 2rem;border-radius:.8rem;box-sizing:border-box;padding:.3rem 20%;"
            :value="date2"
            @click="show2 = true"
          />
          <van-calendar
            id="date2"
            :default-date="timeDefaultShow"
            :min-date="minDate"
            :max-date="maxDate"
            color="#71a16d"
            v-model="show2"
            @confirm="onConfirm2"
          />
        </div>
      </li>
      <!-- 捐赠类型 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/type.png" />
          <span class="li_txt">捐赠类型</span>
        </div>
        <div class="label">
          <input type="text" v-model="donateType" />
        </div>
      </li>
      <!-- 是否定向 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/directional.png" />
          <span class="li_txt">是否定向</span>
        </div>
        <div class="label">
          <van-switch v-model="checked" />
        </div>
      </li>
      <!-- 受赠方 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/recipient.png" />
          <span class="li_txt">受赠方</span>
        </div>
        <div class="label">
          <input type="text" v-model="donatee" placeholder="请输入受赠方" />
        </div>
      </li>
      <!-- 承运方 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/transport.png" />
          <span class="li_txt">承运方</span>
        </div>
        <div class="label">
          <input type="text" v-model="shipper" placeholder="请输入承运方" />
        </div>
      </li>
      <!-- 快递单号 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/symbol.png" />
          <span class="li_txt">快递单号</span>
        </div>
        <div class="label">
          <input type="number" v-model="shipId" placeholder="请输入快递单号" />
        </div>
      </li>
      <!-- 温度要求 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/temperature.png" />
          <span class="li_txt">温度要求</span>
        </div>
        <div class="label">
          <input type="text" v-model="temp" />
        </div>
      </li>
      <!-- 包装数量 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/number.png" />
          <span class="li_txt">包装数量</span>
        </div>
        <div class="label">
          <input type="number" v-model="packageNum" />
        </div>
      </li>
      <!-- 物资规格 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/specs.png" />
          <span class="li_txt">物资规格</span>
        </div>
        <div class="label">
          <input type="text" v-model="productType" />
        </div>
      </li>
      <!-- 批准文号 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/abstract.png" />
          <span class="li_txt">批准文号</span>
        </div>
        <div class="label">
          <input type="text" v-model="fileNo" />
        </div>
      </li>
      <!-- 附件 -->
      <li>
        <div class="label">
          <img class="li_icon" src="../../assets/image/Enclosure.png" />
          <span class="li_txt">附件</span>
        </div>
        <div class="label">
          <van-uploader accept="image/png, image/jpeg, image/jpg" :after-read="afterRead">
            <van-button
              style="border-radius:.8rem;height:2.1rem;line-height:2.1rem"
              icon="photo"
              type="primary"
            >上传领用原始凭证</van-button>
          </van-uploader>
        </div>
      </li>
      <!-- 确认按钮 -->
      <button class="btn" @click="btnDonate">确定</button>
    </ul>
    <!-- loading -->
    <div style="padding-bottom: 4rem; position:top:50%">
      <van-loading
        v-show="loading"
        style="position: absolute;top: 50%;left: 46%;"
        type="spinner"
        color="#1989fa"
      ></van-loading>
    </div>
  </div>
</template>
<script>
import moment from "moment";

export default {
  name: "MaterialDonation",
  data() {
    return {
      userDate: "", // 展示给用户
      donateTime: "",
      donateName: "",
      donateUnit: "",
      donateId: "",
      date1: "",
      date2: "",
      show1: false,
      show2: false,
      timeDefaultShow: "", // 自动选择当天
      minDate: new Date(2015, 0, 1),
      maxDate: new Date(2025, 0, 1),
      donateType: "",
      checked: false, //开关
      donatee: "",
      shipper: "",
      shipId: "",
      temp: "",
      packageNum: "",
      productType: "",
      fileNo: "",
      img: "",
      loading: false // loading
    };
  },
  created() {
    // 自动生成日期
    let nowDate = new Date();
    this.donateTime = moment(nowDate).format("YYYY-MM-DD HH:mm:ss");
    this.userDate = moment(nowDate).format("YYYY-MM-DD");

    //保质期组件里自动获取当天日期
    this.timeDefaultShow = new Date();
    this.timeDefaultShow.setMonth(new Date().getMonth());
  },
  methods: {
    // 生产日期
    formatDate1(date1) {
      return `${moment(date1).format("YYYY-MM-DD HH:mm:ss")}`;
    },
    onConfirm1(date1) {
      this.show1 = false;
      this.date1 = this.formatDate1(date1);
    },
    // 有效期至
    formatDate2(date2) {
      return `${moment(date2).format("YYYY-MM-DD HH:mm:ss")}`;
    },
    onConfirm2(date2) {
      this.show2 = false;
      this.date2 = this.formatDate2(date2);
    },
    // 上传图片
    afterRead(file) {
      this.img = file.content;
    },
    // 提交数据
    btnDonate() {
      let loveCode = "";
      // 根据用户填入数量确定遍历几条爱心码
      for (let i = 0; i < this.donateId; i++) {
        // 遍历20位随机数
        let random = "";
        for (let a = 0; a < 20; a++) {
          random += Math.floor(Math.random() * 10);
        }
        // 末尾用 ， 隔开
        loveCode += random + ";";
      }
      // 拼接后删除末尾的 ，
      let newLoveCode = loveCode.substr(0, loveCode.length - 1);
      this.loading = true; // loading显示
      // 调用接口
      let params = {
        token: JSON.parse(localStorage.getItem("login")).res.token,
        userName: JSON.parse(localStorage.getItem("login")).res.user.userName,
        donateTime: this.donateTime,
        donateName: this.donateName,
        donateUnit: this.donateUnit,
        donateId: newLoveCode, //几个数量几个爱心码
        produceTime: this.date1,
        effectTime: this.date2,
        donateType: this.donateType,
        isPoint: this.checked,
        donatee: this.donatee,
        shipper: this.shipper,
        shipId: this.shipId,
        temp: this.temp,
        packageNum: this.packageNum,
        productType: this.productType,
        fileNo: this.fileNo,
        attachment: this.img
      };
      this.$api
        .donateProduct(params)
        .then(res => {
          this.loading = false; // loading隐藏
          this.$dialog.alert({
            message: res
          });
        })
        .catch(err => {
          this.loading = false; // loading隐藏
          this.$dialog.alert({
            message: err
          });
        });
    }
  }
};
</script>
<style>
@import "../../assets/css/TemplateStyle.css";
</style>